<template>
    <header>
        <h3>优品汇</h3>
        <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        background-color="rgb(17, 114, 85"
        text-color="#fff"
    >
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-menu-item index="2">处理中心</el-menu-item>
        <el-menu-item index="3">处理中心</el-menu-item>
        <el-menu-item index="4">处理中心</el-menu-item>
        <el-menu-item index="5">处理中心</el-menu-item>
        <el-menu-item index="6">处理中心</el-menu-item>
        <el-menu-item index="7">处理中心</el-menu-item>
        <el-menu-item index="8">处理中心</el-menu-item>
    </el-menu>
    <span></span>
    </header>
</template>
<script>
export default {
    data(){
        return{
            activeIndex: '1',
        }
    }
}
</script>
<style lang="scss" scoped>
header{
    width: 100%;
    height: 61px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(17, 114, 85);
    padding: 0 20px;
    h3{
        color: #fff;
        margin-right: 20px;
    }
    .el-menu-demo{
        flex: 1;
        font-size: 18px !important;
    }
}
    .is-active{
        background: azure !important;
    }
</style>